<script>
export default {
  name: 'Category'
}
</script>
<script setup>
import { useProductStore } from '@/store/modules/product'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'

const { isDisabled } = defineProps(['isDisabled'])

// 使用仓库
const productStore = useProductStore()
const { categoryIdData, category1Data, category2Data, category3Data } = storeToRefs(productStore)

// 挂载发请求获取数据
onMounted(() => {
  reqCategory1()
})

// 请求一级分类
function reqCategory1() {
  productStore.reqCategory1()
  Object.assign(categoryIdData.value, {
    id1: '',
    id2: '',
    id3: ''
  })
  category2Data.value = []
  category3Data.value = []
}
// 请求二级分类
function reqCategory2() {
  productStore.reqCategory2()
  Object.assign(categoryIdData.value, {
    id2: '',
    id3: ''
  })
  category3Data.value = []
}
// 请求三级分类
function reqCategory3() {
  productStore.reqCategory3()
  Object.assign(categoryIdData.value, {
    id3: ''
  })
}
</script>

<template>
  <div>
    <el-card>
      <el-form
        label-width="80px"
        inline
      >
        <el-form-item label="一级分类">
          <el-select
            class="select_class"
            v-model="categoryIdData.id1"
            placeholder="请选择一级分类"
            @change="reqCategory2()"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in category1Data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select
            class="select_class"
            v-model="categoryIdData.id2"
            placeholder="请选择二级分类"
            @change="reqCategory3()"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in category2Data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select
            class="select_class"
            v-model="categoryIdData.id3"
            placeholder="请选择三级分类"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in category3Data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
// start

.select_class {
  width: 250px;
}
</style>
